<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .team-members {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        body {
            height: 100vh;
            background-image: url(./img/bg.jpg);

        }

        .team-members>.member {
            position: relative;
            margin: 30px;
            padding: 10px;
            border-radius: 5px;
            width: 230px;
            height: 300px;
            backdrop-filter: blur(-1px);
            background-color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            color: #000;
            transition: all 0.3s ease;
            backdrop-filter: blur(-1px);
            border: 6px solid rgba(255, 255, 255, 0.2);
            transform-style: preserve-3d;
            transition: transform 2s;
        }

        .member:hover {
            backdrop-filter: blur(2px);
            transform: rotateY(360deg);
            transition: all 2s;
        }

        .member .head-sculpture {
            height: 200px;
            width: 200px;
            margin-top: 30px;
            filter: opacity(70%);
            transition: all 1s ease;
        }

        .member:hover img {
            transition: all 1s ease;
            filter: opacity(90%);
        }

        .member .cat {
            height: 25px;
            width: 25px;
            position: absolute;
            filter: opacity(90%);
            left: 15px;
            top: 15px;
            border-radius: 3px;
        }

        .name {
            position: relative;
            width: 100%;
            text-align: center;
            line-height: 50px;
            height: 50px;
            font-size: 50px;
            font-weight: bold;
        }

        .name h1 {
            font-size: 60px;
            position: absolute;
            left: 50%;
            top: 190px;
            transform: translateX(-50%);
        }

        .name>h1:first-child {
            color: pink;
            -webkit-text-stroke: 2px pink;

        }

        .name>h1:last-child {
            /* color: skyblue; */
            animation: water 4s linear infinite;
        }

        @keyframes water {

            0%,
            100% {
                clip-path: polygon(1% 58%, 12% 54%, 22% 63%, 32% 69%, 45% 71%, 59% 72%, 78% 74%, 93% 74%, 100% 75%, 100% 100%, 0% 100%);
            }

            50% {
                clip-path: polygon(0% 70%, 10% 71%, 24% 72%, 38% 73%, 53% 65%, 62% 59%, 75% 53%, 90% 50%, 100% 51%, 100% 100%, 0% 100%);
            }
        }

        .img {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="name">
        <h1>第五组冲鸭</h1>
        <h1>第五组冲鸭</h1>
    </div>
    <img class="img" src="./img/chongya.gif" alt="">
    <!-- <div class="header">前端第五组冲鸭 -->

    <div class="team-members">
        <div class="member"  data-content="张璐">张璐<img class='cat'
                src="./img/Snipaste_2023-02-27_20-18-54.png" alt=""><img src="./img/1.jpg" alt="..."
                class="img-rounded head-sculpture">
        </div>
        <div class="member"  data-content="汪亚琳">汪亚琳<img class='cat'
                src="./img/Snipaste_2023-02-27_20-18-54.png" alt=""><img src="./img/2.png" alt="..."
                class="img-rounded head-sculpture">
        </div>
        <div class="member"  data-content="李佰强">李佰强<img class='cat'
                src="./img/Snipaste_2023-02-27_20-18-54.png" alt=""><img src="./img/3.jpg" alt="..."
                class="img-rounded head-sculpture">
        </div>
        <div class="member"  data-content="唐鸿彬">唐鸿彬<img class='cat'
                src="./img/Snipaste_2023-02-27_20-18-54.png" alt=""><img src="./img/4.jpeg" alt="..."
                class="img-rounded head-sculpture">
        </div>
        <div class="member"  data-content="黄龙波">黄龙波<img class='cat'
                src="./img/Snipaste_2023-02-27_20-18-54.png" alt=""><img src="./img/5.jpg" alt="..."
                class="img-rounded head-sculpture">
        </div>
    </div>

    <script>
        //点击组员div，弹出显示名字的弹框
        const members = document.querySelectorAll('.member');

        members.forEach(member => {
            member.addEventListener('click', () => {
                alert(member.textContent);
            });
        });



    </script>
    <!--看板娘-->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />
    <script src="./live2d-widget-master/autoload.js"></script>
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>

</body>

</html>